<template>
    <div class="portal-layout-preview rx-roll-container">
        <div class="portal-layou-button-box">
            <div class="portal-layou-button" v-if="isEdit == 1">
                <div class="portal-layou-button-left">
                    <my-icon type="iconzidingyibiaodan"/>
                    <span class="portal-layou-button-text">点击编辑按钮实现个性化布局</span>
                </div>
                <div>
                    <a-button type="primary" icon="edit" @click="editPage" v-if="!isDraggable">
                        {{ i18n('list.editPage', '编辑页面') }}
                    </a-button>
                    <a-button @click="notSaveAndReturn" v-if="isDraggable">
                        {{ i18n('list.directReturn', '直接返回') }}
                    </a-button>
                    <a-button @click="restorePortal" v-if="isDraggable">
                        {{ i18n('list.restore', '还原') }}
                    </a-button>
                    <a-button icon="plus-circle" @click="addColumn" v-if="isDraggable">
                        {{ i18n('list.addColumn', '添加栏目') }}
                    </a-button>
                    <a-button type="primary" icon="edit" v-if="isDraggable" @click="finishEdit(layout)">
                        {{ i18n('list.finishEdit', '完成编辑') }}
                    </a-button>
                </div>

            </div>
        </div>
        <div class="portal-layout-center">
            <grid-layout
                :layout.sync="layout"
                :col-num="24"
                :row-height="2"
                :is-draggable="isDraggable"
                :is-resizable="isResizable"
                :is-mirrored="false"
                :vertical-compact="true"
                :autoSize="true"
                :margin="[10, 10]"
                :use-css-transforms="true"
            >
                <grid-item
                    v-for="item in layout"
                    :x="item.x"
                    :y="item.y"
                    :w="item.w"
                    :h="item.h"
                    :i="item.i"
                    :key="item.i"
                >
                    <div class="gridLayoutClass"
                         @click="editObj(item,false)">
                     <span class="btnSpan2" v-if="isDraggable" @click="removeObj(item.i)">
                         <my-icon :title="$ti18('rxList.delBtn','删除')" type="icontrash"></my-icon>
                     </span>
                        <!-- 控件内容-->
                        <div class="FormCustomEditControl">
                            <div v-if="!isFullShow && isShow.indexOf(item.defConf)<=-1 && item.config.fullBtn"
                                 class="griditem-fullscreen">
                                <my-icon @click="fullScreenChild(item)" type="iconmodal-fullscreen"></my-icon>
                            </div>
                            <FormCustomEditControl :item="item"></FormCustomEditControl>
                        </div>
                    </div>
                </grid-item>

            </grid-layout>

            <a-drawer
                placement="right"
                @close="closeDrawer"
                width="400"
                :destroyOnClose="true"
                :visible="showDrawer"
                :z-index="9999"
                :closable="true"
                title="添加栏目"
            >
                <PortalLayoutPreviewAdd :portalId="portalId" @column="getColumn"></PortalLayoutPreviewAdd>
            </a-drawer>
        </div>
    </div>
</template>
<script>
import {RxDialog, Util, DomUtil} from "@lowcode/jpaas-common-lib";
import VueGridLayout from 'vue-grid-layout';
import insPortalDefApi from '../../../../api/portal/core/insPortalDef';
import insPortalUserDefApi from '../../../../api/portal/core/insPortalUserDef'
import PortalLayoutview from './PortalLayoutview';
import Vue from "vue";
import PortalLayoutPreviewAdd from './PortalLayoutPreviewAdd'
import InsPortalDefApi from "../../../../api/portal/core/insPortalDef";
import {mapState} from "vuex";
import FormCustomFull from "@/views/modules/form/core/formComponent/FormCustomFull";


Vue.component('portal-layoutview', PortalLayoutview);

export default {
    name: "portal-layout-preview",
    props: ["portId",
        //这个是从DialogView打开时需要用到的。
        "menuParams",
    ],
    data() {
        return {
            layout: [],
            indexNum: 0,
            isOpenThis: false,//是否进入当前组件
            isDraggable: false,//是否可拖拽
            isResizable: false,//是否可编辑大小
            isEdit: 0,//门户是否允许编辑
            moduleid: '',
            portalId: "",//当前门户id
            showDrawer: false,//是否显示抽屉
            isFullShow: false,
            isShow: ['filter'],
        }
    },
    components: {
        RxDialog,
        insPortalDefApi,
        GridLayout: VueGridLayout.GridLayout,
        GridItem: VueGridLayout.GridItem,
        PortalLayoutPreviewAdd,
        "FormCustomEditControl": () => import('@/views/modules/form/core/FormCustomEditControl'),
    },
    computed: {
        ...mapState({
            appName: state => state.appSetting.appName,
            appId: state => state.appSetting.appId,
        })
    },
    created() {
        this.isOpenThis = true;
        this.getDataList();
    },
    mounted() {
        var self = this;
        window.onresize = () => {
            self.checkFull()
        }
    },
    activated() {
        this.isOpenThis = true;
    },
    deactivated() {
        this.isOpenThis = false;
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "PortalLayoutPreview", key);
        },
        getAlias() {
            var alias = "";
            if (this.$route.meta.params) {
                var json = JSON.parse(this.$route.meta.params);
                alias = json.alias;
            } else if (this.$route.params) {
                alias = this.$route.params.alias;
            } else if (this.menuParams) {
                var params = JSON.parse(this.menuParams);
                alias = params.alias;
            }
            return alias;
        },
        getDataList() {
            if (this.portId) {
                this.getLayoutListByPortalId();
            } else {
                var alias = this.getAlias();
                if (alias) {
                    this.getLayoutListByPortalKey(alias);
                } else {
                    this.getLayoutListByLoginUser();
                }
            }
        },
        //应用内获取首页门户
        getHomePage() {
            var self_ = this;
            if (!this.appId) {
                return;
            }
            InsPortalDefApi.getCurUserPortalByAppId(this.appId).then(res => {
                if (res.success && res.data && res.data.layoutJson) {
                    self_.isEdit = res.data.isEdit;
                    self_.portalId = res.data.portId;
                    self_.layout = JSON.parse(res.data.layoutJson);
                    self_.$emit("portalId", self_.portalId);
                }
            });
        },
        getLayoutListByPortalKey(key) {
            return insPortalDefApi.getLayoutListByPortalKey(key).then(res => {
                if (res.columns.length > 0) {
                    this.indexNum = res.columns.length;
                    this.layout = res.columns;
                }
            });
        },
        getLayoutListByPortalId() {
            return insPortalDefApi.getLayoutListByPortalId(this.portId).then(res => {
                if (res.columns.length > 0) {
                    this.indexNum = res.columns.length;
                    this.layout = res.columns;
                }
            });
        },
        getLayoutListByLoginUser() {
            if (this.appId) {
                this.getHomePage();
                return;
            }
            let self_ = this;
            return insPortalDefApi.getLayoutListByLoginUser().then(res => {
                if (res) {
                    self_.isEdit = res.isEdit;
                    self_.portalId = res.portId;
                    if (res.columns.length > 0) {
                        self_.indexNum = res.columns.length;
                        self_.layout = res.columns;
                    }
                }

            });
        },
        //编辑页面
        editPage() {
            this.isDraggable = true;
            this.isResizable = true;
        },
        //直接返回
        notSaveAndReturn() {
            this.isDraggable = false;
            this.isResizable = false;
            this.getLayoutListByLoginUser();
        },
        //添加栏目
        addColumn() {
            this.showDrawer = true;

        },
        closeDrawer() {
            this.showDrawer = false;
        },
        //完成编辑
        finishEdit(values) {
            this.isDraggable = false;
            this.isResizable = false;
            var parameter = {
                portId: this.portalId,
                layoutList: this.layout,
            }
            return insPortalUserDefApi.saveAll(parameter);
        },
        //获取添加的栏目
        getColumn(column) {
            this.layout.push(column);
        },
        editObj(item, showDrawer) {
            this.moduleid = item.id;
        },
        removeObj(key) {
            var layout = this.layout
            for (var i = 0; i < layout.length; i++) {
                if (key == layout[i].i) {
                    //判断是否是选择的
                    if (this.selectId == layout[i].id) {
                        this.selectId = "";
                        this.supportConf = "";
                        this.support = "";
                    }
                    layout.splice(i, 1);
                    break
                }
            }
        },
        getModuleFliter(item) {
            let _obj = {
                column: this.i18n('colCompo', '栏目组件'),
                list: this.i18n('listCompo', '列表组件'),
                form: this.i18n('formCompo', '表单组件'),
                tree: this.i18n('treeCompo', '树形组件'),
                chart: this.i18n('chartCompo', '图表组件'),
                tab: this.i18n('tabCompo', 'tab组件'),
                ureport: this.i18n('uReportCompo', 'ureport组件'),
            }
            if (item.config && item.config.name) {
                return item.config.name;
            } else {
                return _obj[item.defConf];
            }
        },
        restorePortal() {
            var self = this;
            this.$confirm({
                title: self.$ti18('rxMsa.actionTips', '操作提示'),
                content: self.i18n('msa.tips', '你确定要还原成原始布局吗？'),
                okText: self.$ti18('rxForm.ackBtn', '确认'),
                cancelText: self.$ti18('rxForm.cancelBtn', '取消'),
                keyboard: true,
                zIndex: 999999,
                onOk: function () {
                    insPortalUserDefApi.deleteUserPortalByUserIdAndPortalId(self.portalId).then(res => {
                        self.getLayoutListByLoginUser();
                        self.isDraggable = false;
                        return res;
                    })
                },
                onCancel() {
                },

            })
        },
        //判断是否大屏
        checkFull() {
            let isFull = window.fullScreen || document.webkitIsFullScreen;
            this.isFullShow = isFull
        },
        //单独全屏
        fullScreenChild(item) {
            //流程自建
            let data = {item: item};
            if (item.defConf == "bpm") {
                let itemVue = this.$refs[item.id]
                let bpmVue = itemVue[0].$refs[item.config.alias].$refs.openBpm;
                if (bpmVue && bpmVue.instId) {
                    data.instId = bpmVue.instId;
                }
            }
            var baseConf = {
                component: FormCustomFull,
                curVm: this,
                title: ' ',
                max: true,
                data: data
            }
            Util.open(baseConf, function (action, data) {
            })
        },
    },
    watch: {
        '$route': {
            handler: function (val) {
                //防止 因为keep-alive的原因 路由改变 这个方法一直被调用；
                if (!this.isOpenThis) {
                    return;
                }
                var alias = this.getAlias();
                if (alias) {
                    this.getLayoutListByPortalKey(alias);
                } else {
                    this.getLayoutListByLoginUser();
                }
            },
            deep: true
        }
    }
}
</script>
<style scoped>
.portal-layout-center {
    flex: 1;
    margin-top: -10px;
}

.portal-layout-center >>> .gridLayoutClass {
    border: none;
}
.portal-layou-button-box{
    position: sticky;
    z-index: 1;
    top: 0;
    padding: 10px;
    background: #f0f0f0;
}
.portal-layou-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding: 10px 10px 10px 20px;
    background: white;
    border-radius: 5px;
}

.portal-layou-button-left .portal-layou-button-text {
    font-weight: bold;
    color: #010101;
    font-size: 16px;
    display: inline-block;
    vertical-align: 3px;
    margin-left: 12px;
}

.portal-layou-button-left i {
    color: #4285f4;
    font-size: 22px;
}

.btnSpan2 {
    border-radius: 15px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: white;
    text-align: center;
    background: #ff585a;
    display: inline-block;
    margin-right: 0;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 9999999;
}

.gridLayoutClass {
    background: #fff !important;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.FormCustomEditControl {
    height: 100%;
    width: 100%;
    position: relative;
}

.gridLayoutClass:hover .griditem-fullscreen {
    display: block;
}

.griditem-fullscreen {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 22px;
    cursor: pointer;
    display: none;
    z-index: 99;
    background: #1890ff;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    color: white;
    text-align: center;
    line-height: 30px;
}

.gridLayoutClass {
    background: #fff;
    border: 1px solid #ddd;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column
}

ul, li {
    list-style: none;
}

.portal-layout-preview {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}
</style>

